<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        /*div设置宽度和高度，设置背景元素*/
        .c1 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        /*
        background-repeat:设置背景图平铺方式
              repeat默认值水平数值都平铺
              repeat-x水平平铺
              repeat-y垂直平铺
              no-repeat不平铺

        background-position:图片出现的位置
           其值有三种
                方向值 top,bottom,left,right,center
                方向值组合；注意不能是冲突组合例如：上下
                坐标百分比:x% y%(此处使用的就是坐标百分比)
         */
        .c2 {
            width: 300px;
            height: 200px;
            background-color: green;
            background-image: url("../images/heihei.gif");
            background-repeat: no-repeat;
            background-position: 10% 10%;
        }

        /*
        当背景图片比较大的时候,超过了浏览器的尺寸  此时可以通过滚动条来查看背景图
            其值有两种
                    scroll  默认值,图片随着滚动条而变化
                    fixed   图片是固定 滚动条滚动后图片不会发生任何变化
        */
        .c3 {
            width: 1800px;
            height: 1300px;
            background-image: url("../images/4.jpg");
            background-attachment: fixed;
        }
        /*结合使用 要注意顺序*/
        .c4{
            width: 1500px;
            height: 1500px;
            background: no-repeat url("../images/heihei.gif")  left top red fixed;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>